<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Tab</title>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" >
    <script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet"  href="../reset.css"  />
    <style type="text/css">
        a:hover{text-decoration: none;}
        a:link, a:visited{color: #cc3300;}
        .tab{width: 300px;  overflow:hidden; margin: 10px;  position: relative; }
        .tab .tabHeadList{float: left;padding: 5px;margin-right: 2px; position: relative;  bottom: -1px;
            background: #e6e6e6;border: 1px solid #ccc; border-bottom: none;z-index: 0;}
        .tab .ac{ background: #fff;z-index: 2;   }
        .tab .tabCont{ position: relative; border: 1px solid #ccc;height: 280px; z-index: 1; }
        .tab .tabContList{position: absolute;display: none; padding: 5px; height: 170px;  width: 288px;}
        .tab .tabContList.ac{display: block;}
    </style>
</head>
<body>
<div class="tab">
    <ul class="tabhead clearfix">
        <li class="tabHeadList ac"><a href="#">因您的行</a></li>
        <li class="tabHeadList"><a href="#" >明您已经</a></li>
        <li class="tabHeadList"><a href="#">委会</a></li>
        <li class="tabHeadList"><a href="#">而直接或间</a></li>
    </ul>
    <ul class="tabCont">
        <li class="tabContList ac">遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款</li>
        <li class="tabContList">危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款</li>
        <li class="tabContList">或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款</li>
        <li class="tabContList">遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款</li>
    </ul>
</div>
<div class="tab">
    <ul class="tabhead clearfix">
        <li class="tabHeadList ac"><a href="#">因您的行</a></li>
        <li class="tabHeadList"><a href="http://2kid.org/joke.php" >明您已经</a></li>
        <li class="tabHeadList"><a href="http://2kid.org/joke.php">委会</a></li>
        <li class="tabHeadList"><a href="http://2kid.org/joke.php">而直接或间</a></li>
    </ul>
    <ul class="tabCont">
        <li class="tabContList ac">遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款</li>
        <li class="tabContList">危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款</li>
        <li class="tabContList">或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款</li>
        <li class="tabContList">遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款</li>
    </ul>
</div>
 
<script type="text/javascript">
 function logs(){
		var s='';
		for(var i=0,aLen=arguments.length;i<aLen;i++){
			s+=arguments[i]+' ';
		}
		s=s.slice(0,-1);
		if(!window.console) alert(s);
		else
		console.log(s);
 }

 /**
  * $.Tab
  * @extends jquery.1.6.2
  * @fileOverview 横向幻灯片
  * @author 2kid
  * @email 444212235@qq.com
  * @site 2kid.org
  * @version 1.0
  * @date 2011-08-08
  * Copyright (c) 2011-2012 2kid
  * @example
  *   $('ul').Tab();
  */
(function($){

	$.fn.Tab=function(options){
		var opt=$.extend({},$.fn.Tab.settings,options);
		return this.each(function(){
			var	$this=$(this);
			var	tab=new Tab(opt);
				tab.init($this);

		});
	}
	var Tab=function(options){
		this.o = options;
		this.$tab = null;
        this.names=this.o.names;
        this.className=this.o.className;
        this.showNum=this.o.showNum;
        this.event=this.o.event;
        this.showtab=this.o.showtab;
        this.fx=this.o.fx;
	}
	Tab.prototype={
		init:function(obj){
            var _this=this;
			this.$tab=obj;
			this.$tabHeadList=this.$tab.find('.tabHeadList');
            this.$tabContList=this.$tab.find('.tabContList');
            this.lastTabName=this.names+this.showNum;

            this.listLen=this.$tabHeadList.length;
            for(var i=0;i<this.listLen;i++){
                this.$tabHeadList.eq(i).attr('tabIn',this.names+i);
                this.$tabContList.eq(i).attr('id',this.names+i);
            }

            this.$tabHeadList.bind(this.event,function(event){

                var handle={},$this=$(this);
                var curTabName=$this.attr('tabIn');
                    handle=_this._get(curTabName,_this.lastTabName);

                if(_this.lastTabName==curTabName) return false;

                handle.$lhead.removeClass(_this.className);
                handle.$head.addClass(_this.className);
                if(_this.showtab) _this.showtab(event,handle);
                else     _this.showtabs(event,handle);

                _this.lastTabName=curTabName;
                return false;
            });

		},
        _get:function(n,ln){
           return {
               $head:this.$tabHeadList.filter( '[tabIn=' + n + ']' ),
               $cont:$('#'+n),
               $lhead:this.$tabHeadList.filter( '[tabIn=' + ln + ']' ),
               $lcont:$('#'+ln)
           }
        },

        showtabs:function(event,h){
            switch(this.fx){
                case 'opacity':{
                    h.$lcont.stop(false,true).fadeOut();
                    h.$cont.stop(false,true).fadeIn();
                    break;
                }
                case 'slide':{
                    h.$lcont.stop(false,true).animate({top:h.$lcont.outerHeight(true),opacity:0});
                    h.$cont.stop(false,true).show().animate({top:0,opacity:1});
                    break;
                }
                default:{
                    h.$lcont.hide();
                    h.$cont.show();
                }

            }
        }


	}


	$.fn.Tab.settings={
        names:'tab',
        className:'ac',
        showNum:0,
        showtab:null,
        event:'mouseover',
        fx:''
    }
})(jQuery);

$('.tab').eq(0).Tab();
$('.tab').eq(1).Tab({
    names:'tabs',
    fx:'opacity'/*,
    showtab:function(event,h){
        var url=h.$head.children().attr('href');
//        h.$lcont.animate({left:20,top:50}).animate({left:10,top:90}).animate({left:50,top:200},function(){
//            $(this).hide().css({left:0,top:0});
//        });

        //h.$cont.html($(document.getElementById('cross').contentWindow.document.body).html()).fadeIn();
        $.get(url,function(data){

        });



    }
*/
});
</script>

</body>
</html>